<template>
    <div class="app-container">

        <el-row :gutter="10" class="app-table-top-action ">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="danger" plain icon="el-icon-delete" size="mini" @click="handleDelete(ids)">删除</el-button>
            </el-col>
        </el-row>

        <el-table @selection-change="handleSelectionChange" v-loading="listLoading" :data="list"
            element-loading-text="Loading" border fit highlight-current-row>
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column align="center" label="uid" width="95">
                <template slot-scope="scope">
                    {{ scope.row.id }}
                </template>
            </el-table-column>
            <el-table-column label="账号" align="center">
                <template slot-scope="scope">
                    {{ scope.row.username }}
                </template>
            </el-table-column>

            <el-table-column label="头像" align="center" width="80">
                <template slot-scope="scope">
                    <div class="avatar-wrapper">
                        <img :src="getImg(scope.row.avatar) + '?imageView2/1/w/80/h/80'" class="user-avatar">
                    </div>
                </template>
            </el-table-column>


            <el-table-column label="昵称" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.nickname }}</span>
                </template>
            </el-table-column>

            <el-table-column label="qq" align="center">
                <template slot-scope="scope">
                    {{ scope.row.qq }}
                </template>
            </el-table-column>

            <el-table-column label="b站uid" align="center">
                <template slot-scope="scope">
                    {{ scope.row.bilibili_uid }}
                </template>
            </el-table-column>
            <el-table-column class-name="status-col" label="权限" width="110" align="center">
                <template slot-scope="scope">
                    <el-tag>{{ scope.row.group_name }}</el-tag>
                </template>
            </el-table-column>

            <el-table-column class-name="status-col" label="在会状态" width="110" align="center">
                <template slot-scope="scope">
                    <el-tag>{{ scope.row.state_name }}</el-tag>
                </template>
            </el-table-column>

            <el-table-column class-name="status-col" label="禁用/启用" width="110" align="center">
                <template slot-scope="scope">
                    <el-switch @change="changeUserState(scope.row)" v-model="scope.row.state" active-color="#13ce66"
                        inactive-color="#ff4949" :active-value="1" :inactive-value="0">
                    </el-switch>
                </template>
            </el-table-column>



            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
                    <el-button size="mini" type="text" icon="el-icon-delete"
                        @click="handleDelete([scope.row.id])">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
                :page-sizes="[10, 20, 50, 100]" :page-size="limit" layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>

        <el-dialog title="添加" :visible.sync="addV" width="600px" top="20px">
            <el-form ref="addForm" :model="addForm" label-width="100px" :rules="rules">
                <el-form-item label="账号" prop="username">
                    <el-input v-model="addForm.username" placeholder="请输入账号" />
                </el-form-item>

                <el-form-item label="密码" prop="password">
                    <el-input v-model="addForm.password" placeholder="请输入密码" type="password" />
                </el-form-item>

                <el-form-item label="昵称" prop="nickname">
                    <el-input v-model="addForm.nickname" placeholder="请输入昵称" />
                </el-form-item>

                <el-form-item label="QQ" prop="qq">
                    <el-input v-model="addForm.qq" placeholder="请输入QQ" />
                </el-form-item>

                <el-form-item label="b站uid" prop="bilibili_uid">
                    <el-input v-model="addForm.bilibili_uid" placeholder="请输入b站uid" />
                </el-form-item>

                <el-form-item label="权限" prop="group_id">
                    <el-select v-model="addForm.group_id" placeholder="请选择用户权限">
                        <el-option v-for="(v, i) in group_list" :value="v.id" :label="v.group_name" :key="i"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="状态" prop="state_id">
                    <el-select v-model="addForm.state_id" placeholder="请选择用户状态">
                        <el-option v-for="(v, i) in state_list" :value="v.id" :label="v.state_name" :key="i"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="介绍" prop="introduction">
                    <el-input v-model="addForm.introduction" type="textarea" />
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addV = false">取 消</el-button>
                <el-button type="primary" @click="doAdd()">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="修改" :visible.sync="editV" width="600px" top="20px">
            <el-form ref="editForm" :model="editForm" label-width="100px" :rules="rules">
                <el-form-item label="账号" prop="username">
                    <el-input v-model="editForm.username" placeholder="请输入账号" />
                </el-form-item>

                <el-form-item label="昵称" prop="nickname">
                    <el-input v-model="editForm.nickname" placeholder="请输入昵称" />
                </el-form-item>

                <el-form-item label="QQ" prop="qq">
                    <el-input v-model="editForm.qq" placeholder="请输入QQ" />
                </el-form-item>

                <el-form-item label="b站uid" prop="bilibili_uid">
                    <el-input v-model="editForm.bilibili_uid" placeholder="请输入b站uid" />
                </el-form-item>

                <el-form-item label="权限" prop="group_id">
                    <el-select v-model="editForm.group_id" placeholder="请选择用户权限">
                        <el-option v-for="(v, i) in group_list" :value="v.id" :label="v.group_name" :key="i"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="状态" prop="state_id">
                    <el-select v-model="editForm.state_id" placeholder="请选择用户状态">
                        <el-option v-for="(v, i) in state_list" :value="v.id" :label="v.state_name" :key="i"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="介绍" prop="introduction">
                    <el-input v-model="editForm.introduction" type="textarea" />
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editV = false">取 消</el-button>
                <el-button type="primary" @click="doEdit()">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>
<script>
import md5 from "md5";
import api from "@/api/system/user";
import publicApi from "@/api/public";
import { getImg, isEmpty } from "@/api/help_func";

export default {
    name: "system-user",
    data() {
        return {
            list: null,
            listLoading: false,
            page: 1,
            limit: 10,
            total: 0,
            ids: [],
            state_list: [],
            group_list: [],
            addV: false,
            addForm: {
                introduction: ""
            },
            editV: false,
            editForm: {
                introduction: ""
            },
            getImg: getImg,
            rules: {
                username: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                    { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' }
                ],
                nickname: [
                    { required: true, message: '请输入昵称', trigger: 'blur' }
                ],
                state_id: [
                    { required: true, message: '请选择状态', trigger: 'change' }
                ],
                group_id: [
                    { required: true, message: '请选择权限', trigger: 'change' }
                ],
                introduction: [
                    { required: true, message: '请输入介绍', trigger: 'blur' }
                ]
            }
        }
    },
    created() {
        this.initialize();

    },
    methods: {
        async changeUserState(val) {
            let sdata = {
                id: val.id,
                state: val.state
            };
            let res = await api.changeUserState(sdata);
            if (res.code == 0) {
                this.$message.success(res.msg);
            }
        },
        handleSizeChange(val) {
            this.page = 1;
            this.limit = val;
            this.initialize();
        },
        handleCurrentChange(val) {
            this.page = val;
            this.initialize();
        },

        async listAllState() {
            let res = await publicApi.listAllState();
            this.state_list = res.data;
        },

        async listAllGroup() {
            let res = await publicApi.listAllGroup();
            this.group_list = res.data;
        },

        async initialize() {
            let sdata = {
                page: this.page,
                limit: this.limit
            }
            let res = await api.list(sdata);
            this.list = [...res.data];
            this.total = res.count;
        },
        async handleUpdate(val) {
            await this.listAllGroup();
            await this.listAllState();
            let temp = { ...val };
            this.editForm = {
                id: temp.id,
                username: temp.username,
                nickname: temp.nickname,
                group_id: temp.group_id,
                state_id: temp.state_id,
                qq: temp.qq,
                bilibili_uid: temp.bilibili_uid,
                introduction: temp.introduction,
                state: temp.state
            };
            this.editV = true;
        },
        handleDelete(val) {
            this.$confirm('真的要删除吗, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let res = await api.delete(val);
                if (res.code == 0) {
                    this.$message({
                        type: 'success',
                        message: res.msg
                    });
                } else {
                    this.$message({
                        type: 'error',
                        message: res.msg
                    });
                }
                this.initialize();

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        handleSelectionChange(selection) {
            let temp = [];
            selection.map(x => {
                temp.push(parseInt(x.id));
            });
            this.ids = [...temp];
        },
        handleAdd() {
            this.listAllGroup();
            this.listAllState();
            this.addV = true;
        },
        async doAdd() {
            this.$refs["addForm"].validate(async (bool) => {
                if (bool) {
                    let sdata = { ...this.addForm };
                    if (isEmpty(sdata.group_id)) {
                        this.$message.error("请选择权限");
                        return;
                    }

                    if (isEmpty(sdata.state_id)) {
                        this.$message.error("请选择状态");
                        return;
                    }
                    sdata.password = md5(sdata.password);
                    let res = await api.add(sdata);
                    if (res.code == 0) {
                        this.$message.success(res.msg);
                        this.initialize();
                    }
                }
            });


        },
        async doEdit() {
            this.$refs["editForm"].validate(async (bool) => {
                if (bool) {
                    let sdata = { ...this.editForm };
                    let res = await api.edit(sdata);
                    if (res.code == 0) {
                        this.$message.success(res.msg);
                        this.initialize();
                        this.editV = false;
                    }
                }
            });

        }
    }
}
</script>
<style scoped lang="scss">
.avatar-wrapper {
    margin-top: 5px;
    position: relative;

    .user-avatar {
        cursor: pointer;
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }

}
</style>